<template>
    <el-dialog title="编辑" :visible.sync="dialogEditVisible" :close-on-click-modal="true" :before-close="handleClose"
        width="1300px">
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="grid-head">
                    <span>模块:</span>
                    <span>{{ info.title }}</span>
                    <span>
                        <el-button type="text" @click="editModuleShow">编辑模块信息</el-button>
                    </span>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-left">
                    <el-button type="primary" @click="addCatShow">新建分类</el-button>
                    <ul v-if="cat_list.length > 0">
                        <li v-for="item in cat_list" :key="`${item.cat_id}`"
                            :class="{ 'active-read': (item.cat_id == cat_id) }" @click="catSelect(item)">
                            <div class="cat_title">{{ item.title }}</div>
                            <div class="cat_opt">
                                <el-button type="text" @click.stop="handleEditCatItem(item, 'edit')">编辑</el-button>
                                <el-button type="text" @click.stop="handleEditCatItem(item, 'del')">删除</el-button>
                                <el-button type="text" @click.stop="handleEditCatItem(item, 'sort')">排序</el-button>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-right">
                    <div class="course-search">
                        <el-button type="primary" @click="addCourseShow" class="course-add">添加内容</el-button>
                        <el-form :inline="true" :model="form" class="demo-form-inline">
                            <el-form-item>
                                <el-input placeholder="请输入内容" v-model="form.title" class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <ul v-if="cat_courseware_list.length > 0" class="content">
                        <li class="content__item" v-for="(item, index) in cat_courseware_list"
                            :key="`${item.id}-${index}`">
                            <el-tag effect="dark" size="small">{{ showType(item.book_type) }}</el-tag>
                            <el-image style="width: 150px; height: 150px" :src="item.cover_url" :fit="fit"></el-image>
                            <span class="title">{{ item.title }}</span>
                            <div class="flex-container">
                                <el-button size="small" @click.stop="handleEditRecordTopicItem(item)">录题</el-button>
                                <el-button size="small" @click.stop="handleHiddenCourseItem(item)">{{ item.is_show == 1
                                    ? "隐藏" : "显示" }}</el-button>
                            </div>
                        </li>
                    </ul>
                    <el-empty v-else description="暂无数据"></el-empty>
                </div>
                <el-pagination v-if="cat_courseware_list.length > 0" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="pageInfo.page" :page-sizes="pageSizes"
                    :page-size="pageInfo.page_size" background layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.total">
                </el-pagination>
            </el-col>
        </el-row>
        <!-- 编辑模块 -->
        <AddReadModule v-if="dialogVisible" :dialogVisible.sync="dialogVisible" :module_id="module_id"
            @handleAddSuccess="handleAddSuccess" stye="z-index:9999" />
        <!-- 添加课程 -->
        <!-- <ShowAddCourseWare v-if="showAddCourseWareVisible" :visible.sync="showAddCourseWareVisible" :task_type="-1"
            :edit_task_courseware_arr="edit_task_courseware_id_arr" @handleSelectFiles="handleSelectFiles" /> -->

        <SelectMaterial v-if="showAddCourseWareVisible" :visible.sync="showAddCourseWareVisible"
            @handleSelectFiles="handleSelectFiles" :edit_task_courseware_arr="edit_task_courseware_id_arr"
            :select_type="select_type" />

    </el-dialog>

</template>
<script>
import {
    getInfo,
    eidtReadModuleCoursewarePublish,
    eidtReadModuleCoursewarePublishShow,
    editReadModuleCat,
    updateSortNumCat,
    delReadModuleCat,
    getModuleCateList,
    getModuleCateCourseList
} from "@/api/kanke/textbook/read";
import AddReadModule from './AddReadModule.vue';
// import ShowAddCourseWare from "@/views/kanke/textbook/courseware/components/ShowAddCourseWare.vue";
import SelectMaterial from '@/views/kanke/textbook/components/SelectMaterial.vue';
import { pageSizes } from '@/constant/index';
export default {
    name: "KanKeTextbookEditReadModule",

    props: {
        dialogEditVisible: {
            type: Boolean,
            default: false
        },
        id: {
            type: Number,
            default: 0
        }
    },
    components: {
        AddReadModule,
        SelectMaterial
    },
    data() {
        return {
            loading: false,
            dialogVisible: false,
            showAddCourseWareVisible: false,
            edit_task_courseware_id_arr: [],
            form: {
                title: '',
            },
            info: {},
            cat_list: [],
            cat_courseware_list: [],
            fit: 'contain',
            module_id: 0,
            cat_id: 0,
            book_types: [
                { 'book_type': 1, 'book_name': '课本' },
                { 'book_type': 2, 'book_name': '视频' },
                { 'book_type': 3, 'book_name': 'PPT' },
                { 'book_type': 4, 'book_name': '音频' },
            ],
            pageSizes,
            pageInfo: {
                page_size: 8,
                page: 1,
                total: 0
            },
            select_type: [1, 2, 3, 4]
        }
    },
    created() {
        this.init();
    },
    methods: {
        init: function () {
            this.module_id = this.id;
            this.handleResize();
            const params = {
                ...this.pageInfo,
                ...this.form,
                module_id: this.id,
                cat_id: this.cat_id
            };
            getInfo(params).then((res) => {
                if (res.code == 200) {
                    this.info = res.data.info;
                    this.cat_list = res.data.cat_list;
                    this.cat_courseware_list = res.data.cat_courseware_list;
                    this.cat_id = res.data.select_cat_id;
                    this.pageInfo.total = res.data.total;
                }
            })
        },
        handleResize() {
            let pageSize = 8;
            if (window.innerWidth >= 2560) {
                pageSize = 8;
            } else if (window.innerWidth >= 1920 && window.innerWidth < 2560) {
                pageSize = 8;
            } else if (window.innerWidth >= 1600 && window.innerWidth < 1920) {
                pageSize = 8;
            } else if (window.innerWidth >= 1280 && window.innerWidth < 1600) {
                pageSize = 8;
            } else if (window.innerWidth >= 1024 && window.innerWidth < 1280) {
                pageSize = 8;
            } else if (window.innerWidth >= 768 && window.innerWidth < 1024) { }
            if (this.pageInfo.page_size == 8) {
                this.pageInfo.page_size = pageSize;
            }
            this.pageSizes = [];
            for (let i = 1; i <= 5; i++) {
                this.pageSizes.push(i * pageSize);
            }
        },
        showType(book_type) {
            for (let i = 0; i < this.book_types.length; i++) {
                if (book_type == this.book_types[i].book_type) {
                    return this.book_types[i].book_name;
                }
            }
        },
        handleClose() {
            this.$emit('update:dialogEditVisible', false);
        },
        editModuleShow() {
            this.dialogVisible = !this.dialogVisible;
        },
        addCatShow() {
            this.$prompt('请输入分类名称', '新建分类', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: '',
                // 最多17个字
                inputPattern: /^.{0,15}$/,
                // inputPattern: /\d+/,
                inputErrorMessage: '标题长度最多15个字'
            }).then(({ value }) => {
                const params = {
                    title: value,
                    module_id: this.module_id,
                }
                editReadModuleCat(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.init()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消新建'
                });
            });
        },
        addCourseShow() {
            if (!this.module_id) {
                this.$message.error('请选择模块');
                return
            }
            if (!this.cat_id) {
                this.$message.error('请选择分类');
                return
            }
            this.edit_task_courseware_id_arr = [];
            if (this.cat_courseware_list.length > 0) {
                for (let i = 0; i < this.cat_courseware_list.length; i++) {
                    this.cat_courseware_list[i].id = this.cat_courseware_list[i].courseware_publish_id;

                    //new add content_id =0
                    this.cat_courseware_list[i].content_id = 0;

                    this.edit_task_courseware_id_arr.push(this.cat_courseware_list[i]);
                }
            }
            console.log('read module add courseware', this.edit_task_courseware_id_arr);
            this.showAddCourseWareVisible = !this.showAddCourseWareVisible;
        },
        search() {
            const params = {
                ...this.pageInfo,
                ...this.form,
                module_id: this.id,
                cat_id: this.cat_id
            };
            getModuleCateCourseList(params).then((res) => {
                if (res.code == 200) {
                    this.cat_courseware_list = res.data.cat_courseware_list;
                    this.pageInfo.total = res.data.total;
                }
            })
        },
        catSelect(item) {
            this.cat_id = item.cat_id;
            const params = {
                ...this.pageInfo,
                ...this.form,
                module_id: this.id,
                cat_id: this.cat_id
            };
            getModuleCateCourseList(params).then((res) => {
                if (res.code == 200) {
                    this.cat_courseware_list = res.data.cat_courseware_list;
                    this.pageInfo.total = res.data.total;
                }
            })
        },
        handleAddSuccess() {
            this.dialogVisible = false
            this.init()
        },
        handleEditCatItem(item, type) {
            console.log('分类', item, type);
            switch (type) {
                case 'edit':
                    this.$prompt('请输入分类名称', '修改分类', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputValue: item.title,
                        // inputPattern: /\d+/,
                        // inputErrorMessage: '序号不合法,仅支持数字'
                    }).then(({ value }) => {
                        const params = {
                            id: item.cat_id,
                            title: value,
                            module_id: this.module_id,
                        }
                        editReadModuleCat(params).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.init()
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消修改'
                        });
                    });
                    break;
                case 'del':
                    this.$confirm('确定要删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                        const params = {
                            id: item.cat_id,
                            module_id: this.module_id
                        }
                        delReadModuleCat(params).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.init()
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消删除'
                        });
                    });
                    break;
                case 'sort':
                    this.$prompt('请输入新的序号', '修改排序', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputValue: item.sort_num,
                        inputPattern: /\d+/,
                        inputErrorMessage: '序号不合法,仅支持数字'
                    }).then(({ value }) => {
                        const params = {
                            sort_num: value,
                            id: item.cat_id,
                        }
                        updateSortNumCat(params).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.init()
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消排序'
                        });
                    });
                    break;
            }
        },
        handleEditRecordTopicItem(item) {
            this.$message('录题操作暂时没有');
        },
        handleHiddenCourseItem(item) {
            const params = {
                id: item.id
            };
            eidtReadModuleCoursewarePublishShow(params).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.init();
                }
            })
        },
        handleSelectFiles(data) {
            if (data.length <= 0) {
                return
            }
            let courseware_publish_id_list = [];
            for (let i = 0; i < data.length; i++) {
                courseware_publish_id_list.push(data[i].id);
            }
            const params = {
                module_id: this.module_id,
                cat_id: this.cat_id,
                courseware_publish_id_list: courseware_publish_id_list
            };
            eidtReadModuleCoursewarePublish(params).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.init();
                }
            })
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageInfo.page_size = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageInfo.page = e;
            this.init();
        }
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/abstract/mixins.scss";

.grid-head {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;

    // background:red;
    span {
        font-size: large;
        margin-left: 5px;
    }
}

.input-with-select {
    width: 350px;
}

.grid-left {
    height: 650px;
    border-right: 10px solid #ccc;
    width: 100%;

    ul {
        padding: 0;
    }

    ul li {
        height: 50px;
        line-height: 50px;
        list-style: none;

        .cat_title {
            white-space: nowrap;
            width: 60%;
            font-size: medium;
            overflow-x: scroll;
            float: left;
            border-right: 3px solid #fff;
            padding: 0px 5px;
            overflow: hidden;
            /* 确保超出的内容被裁剪 */
            white-space: nowrap;
            /* 确保文本在一行内显示 */
            text-overflow: ellipsis;
            /* 使用省略号表示超出的文本 */

        }

        .cat_opt {
            float: right;
            padding: 0px 10px;
        }
    }
}

.active-read {
    background: #ccc;
}

.grid-right {
    height: 650px;
    width: 100%;

    .course-search {
        height: 50px;
        display: flex;
    }

    .course-add {
        height: 40px;
        margin-right: 20px;
    }
}

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    max-height: 550px;
    overflow: auto;

    &__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 10px;
        padding: 15px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;

        ::v-deep .el-checkbox__label {
            display: none;
        }

        ::v-deep .el-checkbox {
            font-size: 11px;
        }


        .el-tag {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;

        }

        .title {
            width: 140px;
            max-height: 48px;
            line-height: 16px;
            margin: 10px 0;
            word-break: break-word;
            white-space: normal;
            @include line-clamp(3);
        }

        .el-button {
            width: 50px;
        }

        .flex-container {
            display: flex;
        }

        .flex-container el-button {
            margin-right: 10px;
        }

        .el-checkbox {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}
</style>